<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  export let todos = [];
</script>

<div class="mt-4">
  {#each todos as todo}
    <div class="bg-white shadow-lg rounded p-4 mb-3 dark:bg-gray-700">
      <h1
        class={'text-3xl mb-2' + (todo.complete ? ' line-through text-gray-400 dark:text-gray-600' : ' text-gray-700 dark:text-gray-400')}>
        {todo.text}
      </h1>
      <div class="flex justify-between items-center">
        <div class="text-sm text-gray-400 dark:text-gray-600">{todo.time}</div>
        <div>
          <button
            class="p-2 border rounded focus:outline-none dark:border-gray-600"
            on:click={() => {
              dispatch('toggleTodo', todo.id);
            }}>
            <svg
              t="1593448836232"
              class="icon fill-current text-gray-600"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2878"
              width="12"
              height="12">
              <path
                d="M997.888 70.144C686.592 261.12 460.8 502.272 358.912
                623.104L110.08 428.032 0 516.608l429.568 437.248C503.296 764.416
                737.792 394.24 1024 131.072l-26.112-60.928m0 0z"
                p-id="2879" />
            </svg>
          </button>
          <button
            class="ml-2 p-2 border rounded focus:outline-none
            dark:border-gray-600"
            on:click={() => {
              console.log(1);
              dispatch('deleteTodo', todo.id);
            }}>
            <svg
              t="1593449388081"
              class="icon fill-current text-gray-600"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8361"
              width="12"
              height="12">
              <path
                d="M64 168V112c0-26.6 21.4-48 48-48h224l18.8-37.4c8-16.4
                24.6-26.6 42.8-26.6h228.6c18.2 0 34.8 10.2 43 26.6L688
                64h224c26.6 0 48 21.4 48 48v56c0 13.2-10.8 24-24 24H88C74.8 192
                64 181.2 64 168z m830.4 113.4L853.6 934c-3.2 50.6-45.2 90-95.8
                90H266.2c-50.6 0-92.6-39.4-95.8-90L129.6 281.4c-0.8-13.8
                10.2-25.4 24-25.4h717c13.6 0 24.6 11.6 23.8 25.4z"
                fill=""
                p-id="8362" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  {/each}
</div>
